<template>
  <div>
    <div
      class="diy-notice"
      :style="[
        `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
      ]"
    >
      <div
        class="diy-notice-1"
        :class="diyItem.style.shade == 1 ? 'diy-style-shade' : ''"
        :style="[
          `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          `background:${
            diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
          }`,
          `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        ]"
      >
        <div class="diy-notice-icon">
          <image
            :src="diyItem.style.icon"
            @load="imageLoad"
            mode="heightFix"
            :style="{
              width: `${image.width}rpx`,
              height: `${image.height}rpx`,
            }"
            class="fade-show"
          ></image>
        </div>
        <div class="diy-notice-split"></div>
        <swiper
          :vertical="true"
          :autoplay="true"
          :circular="true"
          interval="6000"
          class="diy-notice-swiper"
        >
          <template>
            <swiper-item
              v-for="(item, index) in diyItem.data"
              :key="index"
              class="diy-notice-swiper-item"
            >
              <div
                class="diy-notice-title"
                :style="[`color: ${diyItem.style.color}`]"
              >
                {{ item.title }}
              </div>
            </swiper-item>
          </template>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "diyNotice",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { diyNoticeDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyNoticeDataType;
  }>(),
  {
    diyItem: () => {
      return {
        params: {
          source: "auto",
        },
        style: {
          icon: "",
          color: "#000000",
          bg_status: 1,
          bg: "",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
  }
);

const image = ref<{
  width: number;
  height: number;
}>({
  width: 0,
  height: 0,
});

const imageLoad = (e: any) => {
  var width = e.detail.width, //获取图片真实宽度
    height = e.detail.height,
    ratio = width / height; //图片的真实宽高比例
  var viewHeight = 40, //设置图片高度值
    viewWidth = 40 * ratio; //计算的宽度值
  image.value = {
    width: viewWidth,
    height: viewHeight,
  };
};
</script>



<style scoped>
.diy-notice .diy-notice-1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  overflow: hidden;
}

.diy-notice .diy-notice-1 .diy-notice-icon {
  flex-shrink: 0;
  height: 28rpx;
  text-align: center;
  line-height: 36rpx;
}
.diy-notice .diy-notice-1 .diy-notice-icon image {
  width: 120rpx;
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.diy-notice .diy-notice-1 .diy-notice-split {
  width: 1rpx;
  height: 10px;
  background-color: #e4e4e4;
  margin: 0 21rpx;
}

.diy-notice-swiper {
  flex: 1;
  height: 40rpx;
}
.diy-notice-swiper-item {
  display: flex;
  align-items: center;
}
.diy-notice .diy-notice-1 .diy-notice-title {
  flex: 1;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>